<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="../CSS/songerAlbum.css">
    <script src="../Vuejs文件/vue.js"></script>
    <script src="../axios-master/dist/axios.min.js"></script>
</head>

<body>
    <div class="g-all">
        <div class="g-mn4">
            <div class="g-artist">
                <div class="g-artistname">
                    <h2>
                        {{artist.name}}
                    </h2>
                </div>
                <div class="g-cover">
                    <img class="artister" v-bind:src="artist.picUrl" alt="">
                </div>
            </div>
            <div class="liebiao">
                <ul>
                    <li class="lia"><a href="songerSingle.html">热门作品</a></li>
                    <li class="lib"><a href="songerAlbum.html">所有专辑</a></li>
                    <li class="lic"><a href="songerInformation.html">艺人介绍</a></li>
                </ul>
            </div>
        </div>
        <div class="g-mn5">
            <div class="g-mn6">
                <ul>
                    <li v-for="item in page.page[page.num].list">
                        <div class="cover">
                            <a href="zhuanji.html" @click="setAlbumId(item.id)" v-bind:title=item.name
                                @mouseover="showOmissions(item,$event)">
                                <img v-bind:src="item.picUrl" v-bind:title=item.name alt="">
                                <span class="span1">
                                    {{item.name}}
                                </span>
                            </a>
                            <br>
                            <span class="span2">
                                {{item.publishTime}}
                            </span>
                        </div>
                    </li>
                </ul>
                <input v-bind:disabled="page.num==0" type="button" value="上一页" @click="prePage()">
                <input v-for="(item,index) in page.page" type="button" v-bind:value="index+1" @click="selectPage(index)"
                    v-bind:class="{selectButton:page.isActive[index]}">
                <input v-bind:disabled="page.num==page.sum-1" type="button" value="下一页" @click="nextPage()">
                <div v-show="page.flag" style="color: #666;">
                    <span>
                        跳转到：
                    </span>
                    <input type="text" size="2" v-model="page.select"
                        onKeypress="return (/[\d]/.test(String.fromCharCode(event.keyCode)))" @keyup.enter="changePage">
                    {{1}}~{{page.sum}}
                    <input type="button" value="跳转" @click="changePage()">
                </div>
            </div>
        </div>
    </div>
    <script>
        var app = new Vue({
            el: ".g-all",
            data: {
                artist: {
                    id: "",
                    picUrl: "",
                    name: "",
                },
                hotAlbums: [{
                    picUrl: "",      //专辑图片
                    name: "",        //专辑名字  
                    id: "",      //专辑id
                    publishTime: "",
                    omission: "",
                    isOmit: "",
                }],
                page: {
                    page: [{
                        list: [{
                            picUrl: "",     //专辑图片
                            name: "",       //专辑名字
                            id: "",     //专辑id
                            publishTime: "",
                            omission: "",
                            isOmit: "",
                        }]
                    }],
                    isActive: [],
                    size: 12,
                    num: 0,
                    sum: 0,
                    select: "",
                    flag: false,
                }
            },
            methods: {
                get: function () {
                    var that = this;
                    that.artist.id = sessionStorage.getItem("songerId");
                    axios.get(
                        "https://autumnfish.cn/artist/album?id=" + that.artist.id
                    ).then(function (response) {
                        console.log(response);
                        that.artist = response.data.artist;
                        that.artist.picUrl = that.artist.picUrl + "?param=370y300";
                        that.hotAlbums = response.data.hotAlbums;
                        for (var i = 0; i < that.hotAlbums.length; i++) {
                            that.hotAlbums[i].picUrl = that.hotAlbums[i].picUrl + "?param=120y120";
                        }
                        that.changeTime();
                        that.changeNameLength();
                        that.getPageList();
                    }, function (err) {

                    })
                },
                setAlbumId: function (albumId) {
                    sessionStorage.setItem("albumId", albumId);
                },
                changeTime: function () {
                    var t = new Date();
                    for (var i = 0; i < this.hotAlbums.length; i++) {
                        t.setTime(this.hotAlbums[i].publishTime);
                        this.hotAlbums[i].publishTime = t.toLocaleDateString().replace(/\//g, ".");
                    }
                },
                getPageList: function () {
                    this.page.sum = parseInt(this.hotAlbums.length / this.page.size) + 1;
                    if (this.page.sum != 1) {
                        this.page.flag = true;
                    }
                    for (var i = 0; i < this.page.sum; i++) {
                        this.page.page.push({ list: this.hotAlbums.slice(i * this.page.size, (i + 1) * this.page.size) });
                        this.page.isActive.push(false);
                    }
                    this.page.isActive[0] = true;
                    this.page.page.shift();
                },
                nextPage: function () {
                    this.page.num++;
                    this.page.isActive[this.page.num] = true;
                    this.page.isActive[this.page.num - 1] = false;
                },
                prePage: function () {
                    this.page.num--;
                    this.page.isActive[this.page.num] = true;
                    this.page.isActive[this.page.num + 1] = false;
                },
                changePage: function () {
                    if (this.page.select > 0 && this.page.select <= this.page.sum) {
                        this.page.num = this.page.select - 1;
                        for (var i = 0; i < this.page.sum; i++) {
                            this.page.isActive[i] = false;
                        }
                        this.page.isActive[this.page.num] = true;
                    }
                },
                selectPage: function (pageNum) {
                    this.page.num = pageNum;
                    for (var i = 0; i < this.page.sum; i++) {
                        this.page.isActive[i] = false;
                    }
                    this.page.isActive[this.page.num] = true;
                },
                showOmissions: function (item, e) {
                    if (item.isOmit) {
                        e.target.setAttribute("title", item.omission);
                    }
                },
                changeNameLength: function () {
                    for (var i = 0; i < this.hotAlbums.length; i++) {
                        if (this.hotAlbums[i].name.length > 15) {
                            this.hotAlbums[i].omission = this.hotAlbums[i].name;
                            this.hotAlbums[i].name = this.hotAlbums[i].name.substring(0, 15) + "...";
                            this.hotAlbums[i].isOmit = true;
                        } else {
                            this.hotAlbums[i].isOmit = false;
                        }
                    }
                },
            }
        });
        //初始化页面
        app.get();
    </script>
</body>

</html>